<template>
	<view>
		<view class="fiexd-top content">
			<!-- 选择实习/社招 -->
			<view class="top text-lg">
				<view class="top-switch" v-for="(item,index) in switchBtns" :key="index" :class="index==isactive?'top-active':''"
				 @click="topswitch(index)">
					<image :src="index==isactive?item.checkedImageUrl:item.imageUrl" mode=""></image>
					<text>{{item.text}}</text>
				</view>
			</view>

			<!-- 选择工作分类 -->
			<scroll-view class="scroll-view1" scroll-x="true" scroll-with-animation="true" show-scrollbar="false"
			 :scroll-into-view="scrollChoosedItem">
				<view :id="'item'+index" class="text-md job-class" v-for="(item,index) in jobClassAndList" :key="index" :class="classIsActive==index?'class-active':''"
				 @click="classswitch(index)">
					{{item.title}}
				</view>
			</scroll-view>
		</view>

		<!-- 工作列表 -->
		<swiper class="scroll-view2" :current="current" @change="changeCurrent">
			<swiper-item v-for="(item,index) in jobClassAndList" :key="index">
				<view class="swiper-item">
					<scroll-view scroll-y="true" refresher-enabled="true" @refresherrefresh="refresherrefresh(index)"
					 :refresher-triggered="item.triggered" @scrolltolower="scrolltolower">
						<view>
							<!-- <navigator url="/pages/job/jobdetail" class="job-detail" hover-class="none" v-for="(item1,index1) in item.jobList"
							 :key="index1">
								<view class="job-detail-box">
									<view class="job-title text-lg">
										<view>
											{{item1.title}}
										</view>
										<view class="job-money">
											{{item1.money}}
										</view>
									</view>
									<view class="job-company-date">
										<view class="text-md job-company">
											{{item1.company}}
										</view>
										<view class="text-sm job-date">
											{{item1.date}}
										</view>
									</view>
									<view class="text-xs job-label">
										<view v-for="(item2,index2) in item1.labels" :key="index2">
											{{item2}}
										</view>
									</view>
								</view>
							</navigator> -->
							<personalItem :list="item.jobList" :isDelete="false" :isNavicatTo="true"></personalItem>
						</view>
						<view class="loading-box">
							{{loading?"加载中":"没有更多了!"}}
						</view>
					</scroll-view>
				</view>
			</swiper-item>
		</swiper>

		<view class="fabu-box" @click="toFabu">
			<image src="../../static/job/fb.png" mode=""></image>
		</view>

	</view>
</template>

<script>
	import personalItem from "../../components/personalItem";
	export default {
		components: {
			personalItem: personalItem
		},
		data() {
			return {
				switchBtns: [{
						text: "实习",
						imageUrl: "../../static/job/sx_w_icon.png",
						checkedImageUrl: "../../static/job/sx_w_icon_ch.png"
					},
					{
						text: "社招",
						imageUrl: "../../static/job/sz_icon.png",
						checkedImageUrl: "../../static/job/sz_icon_ch.png"
					}
				],
				isactive: 0, //选择的实习和社招的index
				classIsActive: 0, //选择的工作分类的index
				scrollChoosedItem: "item0", //工作分类滚动到的元素
				current: 0, //与工作分类相对应的swiper滚动到的current
				jobClassAndList: [], //工作列表以及工作分类列表
				loading: true, //是否还有下一页
				pageSize: 10 //每页限制条数
			}
		},
		onLoad() {
			this.getJobTypeList()
		},
		methods: {
			// 获取岗位类型列表和工作列表
			getJobTypeList() {
				// 获取岗位类型列表
				if (this.jobClassAndList.length) {
					this.getJobList()
				} else {
					this.sgAjax.getJobTypeList().then(res => {
						this.jobClassAndList = res.data.typeList
						this.jobClassAndList = this.jobClassAndList.map(item => {
							return {
								title: item,
								pageNum: 1,
								jobList: [],
								currentPage: 0,
								triggered: false
							}
						})
						this.getJobList()
					})
				}
			},
			// 获取岗位列表
			getJobList() {
				// 获取职位列表
				let data = {
					pageNum: this.jobClassAndList[this.current].pageNum,
					pageSize: this.pageSize,
					jobType: this.jobClassAndList[this.current].title,
					recruitType: this.isactive ? "社招" : "实习",
					keyword: "",
					sortKey: "",
					order: "",
					model: ""
				}
				this.sgAjax.getJobList(data).then(res1 => {
					let jobList = this.jobClassAndList[this.current].jobList
					jobList = jobList.concat(res1.data.list);
					this.jobClassAndList[this.current].jobList = jobList
					this.jobClassAndList[this.current].currentPage = res1.data.currentPage ? res1.data.currentPage : 0
					this.jobClassAndList[this.current].total = res1.data.total ? res1.data.total : 0
					this.jobClassAndList[this.current].triggered = false
				})
			},

			// 选择实习/社招
			topswitch(index) {
				this.isactive = index
				this.current = 0
				this.classswitch(0)
				this.jobClassAndList = []
				this.getJobTypeList()
			},
			// 选择工作分类
			classswitch(index) {
				this.classIsActive = index
				this.scrollChoosedItem = 'item' + index
				this.current = index
			},
			// 滑动下边的swiper
			changeCurrent(e) {
				this.current = e.detail.current
				this.classIsActive = e.detail.current
				this.scrollChoosedItem = 'item' + e.detail.current
			},
			// 自定义下拉刷新被触发
			refresherrefresh(index) {
				this.jobClassAndList[index].triggered = true
				this.jobClassAndList[index].jobList = []
				this.getJobTypeList()
			},
			// 上拉加载下一页
			scrolltolower() {
				this.jobClassAndList[this.current].pageNum += 1
				this.getJobTypeList()
			},

			// 去发布工作
			toFabu() {
				uni.navigateTo({
					url: "./releasejob"
				})
			}
		},
		watch: {
			current(newValue, oldValue) {
				if (this.jobClassAndList.length && !this.jobClassAndList[newValue].jobList.length) {
					this.getJobTypeList()
				}
			}
		},
	}
</script>

<style scoped>
	.scroll-view1 ::-webkit-scrollbar {
		width: 0;
		height: 0;
		background-color: transparent;
	}

	.fiexd-top {
		position: fixed;
		top: 0;
		background-color: #FFFFFF;
		z-index: 99;
	}

	.scroll-view2 {
		margin-top: 156rpx;
		height: calc(100vh - 156rpx);
	}

	.scroll-view2 .swiper-item,
	.scroll-view2 swiper-item,
	.scroll-view2 scroll-view {
		width: 100%;
		height: calc(100vh - 156rpx);
	}

	.text-lg {
		font-size: 32rpx;
	}

	.text-md {
		font-size: 28rpx;
	}

	.text-sm {
		font-size: 24rpx;
	}

	.text-xs {
		font-size: 22rpx;
	}

	.content {
		padding: 0 33rpx;
		width: 100%;
		box-sizing: border-box;
	}

	.top {
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin-bottom: 16rpx;
	}

	.top image {
		width: 32rpx;
		height: 32rpx;
		margin-right: 8rpx;
	}

	.top-switch {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		height: 80rpx;
		width: 250rpx;
		border-radius: 40rpx;
		color: #040319;
		opacity: 0.4;
	}

	.top-active {
		background-color: #1B82FE;
		color: #FFFFFF;
		box-shadow: 0 8px 10px -6px rgba(0, 38, 208, 0.30);
		opacity: 1;
	}

	.scroll-view1 {
		display: flex;
		flex-direction: row;
		white-space: nowrap;
		margin-bottom: 15rpx;
	}

	.scroll-view1 view {
		display: inline-block;
		margin-right: 46rpx;
	}

	.scroll-view1 view:last-child {
		margin: 0;
	}

	.job-class {
		color: #040319;
		opacity: 0.4;
		padding: 8rpx;
	}

	.class-active {
		font-size: 32rpx;
		opacity: 1;
		background-image: url(../../static/job/switch_chos.png);
		background-size: 48rpx 15rpx;
		background-repeat: no-repeat;
		background-position: bottom right;
		font-weight: bold;
	}

	.job-detail {
		border-bottom: 1rpx solid rgba(4, 3, 25, 0.1);
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 194rpx;
	}

	.job-detail-box {
		width: 100%;
	}

	.job-detail .job-title {
		font-weight: bold;
	}

	.job-detail .job-title,
	.job-detail .job-company-date {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;
	}

	.job-detail .job-company-date {
		margin: 16rpx 0;
	}

	.job-detail .job-money {
		color: #1B82FE;
	}

	.job-detail .job-company {
		color: rgba(4, 3, 25, 0.6);
	}

	.job-detail .job-date {
		color: rgba(4, 3, 25, 0.4);
	}

	.job-detail .job-label {
		display: flex;
		flex-direction: row;
	}

	.job-detail .job-label view {
		margin-right: 10rpx;
		padding: 8rpx 12rpx;
		background-color: rgba(4, 3, 25, 0.04);
		color: rgba(4, 3, 25, 0.4);
	}

	.loading-box {
		color: rgba(4, 3, 25, 0.4);
		height: 80rpx;
		font-size: 24rpx;
		text-align: center;
		line-height: 80rpx;
	}

	.fabu-box {
		position: fixed;
		right: 50rpx;
		bottom: 100rpx;
		z-index: 99;
	}

	.fabu-box image {
		width: 80rpx;
		height: 80rpx;
	}
</style>
